<template>
  <div class="header">
    <!-- 时间组件 -->

    <div class="flex">
      <div class="flex" style="margin-top: 25px">
          <div id="voice" :class="domItem[0] ? 'btn-left-on' : ''"  class="s-btn voice-btn-bg earlyWarning" style="z-index: 210" @click.stop="goTo">
            <span class="menu-textcolor">语音预警</span>
          </div>
          <div id="radar" :class="domItem[1] ? 'btn-left-on': '' "  class="s-btn voice-btn-bg earlyWarning" style="z-index: 200; margin-left: -30px" @click.stop="goTo"> 
            <span class="menu-textcolor">雷达预警</span>
          </div>
      </div>
      <div style="width: 33%">
        <a href="/bullysys/index">
          <span class="menu-textcolor" style="font-size: 40px">AI反霸凌预警系统</span>
        </a>
      </div>

      <div class="flex" style="margin-top: 25px">
        <div id="smoke"  :class="domItem[2]? 'btn-right-on' : ''" class="s-btn smoke-btn-bg earlyWarning" style="z-index: 210"  @click.stop="goTo">  
            <span class="menu-textcolor">烟雾预警</span> 
        </div>
        <div id="sound"  :class="domItem[3] ? 'btn-right-on' : '' " class="s-btn smoke-btn-bg earlyWarning" style="z-index: 200; margin-left: -30px" @click.stop="goTo">
            <span class="menu-textcolor">声音预警</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { usefromToStore } from '../stores/fromTo'

const router = useRouter()

const store = usefromToStore()

const domItem = ref([false,false,false,false])

const voiceItem = ref([]);

const voiceBtn = el => { 
  if(el){
    voiceItem.value.push(el);
  }
}
const clearSty = (voiceItem) =>{ 
  let topBtn = voiceItem.value

  console.log(topBtn)
  for(let i of topBtn){
    i.classList.remove('btn-left-on')
  }
}

const goTo = (event)=>{ 
  const domItems = domItem.value
  for(let item in domItems){ 
    domItems[item] = false
  }

  if(event.target.innerText == '语音预警'){
    router.push({
      path:'/speech/dormitory'
    })
    store.setFrom('语音预警') 
    domItem.value[0] = true
  }else if(event.target.innerText == '雷达预警'){
    router.push({
      path:'/radar/dormitory'
    })
    store.setFrom('雷达预警') 
    domItem.value[1] = true
   

  }else if(event.target.innerText == '烟雾预警'){
    router.push({
      path:'/smoke/dormitoryList'
    })
    store.setFrom('烟雾预警') 
    domItem.value[2] = true
  }else if(event.target.innerText == '声音预警'){
    router.push({
      path:'/voice'
    })
    store.setFrom('声音预警') 
    domItem.value[3] = true
  } 
}
</script>

<style>
.header {
  margin-top: 20px;
  width: 100%;
  height: auto;
  text-align: center;
  background: url(../static/top-bg.png);
  background-size:cover
}
.voice-btn-bg{
  background: url(../static/voice-btn-bg.png) no-repeat;
}
.smoke-btn-bg{
  background: url(../static/smoke-btn-bg.png) no-repeat;
}
.earlyWarning{
  cursor: pointer;
}
.btn-left-on {
    background: url(../static/btn-bg-left-on.png) no-repeat;
    width: 253px;
    height: 53px;
    line-height: 53px;
}

.btn-right-on {
    background: url(../static/btn-bg-right-on.png) no-repeat;
    width: 253px;
    height: 53px;
    line-height: 53px;
}
</style>
